<html>
    <header>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" >
        <title>心持恒辅助背诵</title>
        <meta charset="UTF-8">
    </header>
    <style>
        .top{width: 100%; height: 30%;}
        .main{margin: auto;}
        .question,.hint,.answer{width: 100%; line-height: 30px; text-align: center;}
        .bottom{width: 100px; margin: auto; margin-top: 20px;}
        .ok{ width: 100%; min-height: 30px;}
    </style>
    <body>
        <div class="top"></div>
        <div class="main">
            <div class="question" id="question"></div>
            <div class="hint" id="hint">***</div>
            <div class="bottom"><input onkeydown="keyup_submit(event);" class="answer" id="answer" value="" /></div>
            <div class="bottom">
                <button class="ok" onclick="ok()">确定</button>
            </div>
            <div class="hint" id="errorConStr"></div>
        </div>
    </body>
    <script>
        var answer = "";
        //改这儿
        var txt = "题目：啦啦，可以<br>换行:答案:提示,题目2:答案2";
        txt += ",题目3:答案3";
        //end
        var txtoary = txt.split(',');
        var txtary = randomTxt(txtoary);
        //console.log(txtary);
        var tmary = txtary[0].split(':');
        //console.log(tmary);
        var dqstr = txtary[0];
        var question = tmary[0];
        var answer = tmary[1];
        var hint = "";
        if(!(typeof(tmary[2]) == "undefined")){
            hint = tmary[2];
        }
        document.getElementById('question').innerHTML=question;
        var dq = 0;
        var max = txtary.length;
        max = max-1;
        var maxstr = tmary[max];
        var errorCoun = 0;
        var errorAry = [];
        //console.log(maxstr);
        function ok(){
            var reply = document.getElementById('answer').value;
            document.getElementById('answer').value="";
            if(reply=="ex1"||reply=="ex2"||reply=="ex3"){
                errorJG(reply);
            }else if(answer==reply){
                //alert("正确");
                //document.getElementById('hint').innerHTML="ok";
                dq++;
                if(dq>max){
                    alert("已经学习完了");
                }else{
                    dqstr = txtary[dq];
                    dtm = txtary[dq].split(':');
                    question = dtm[0];
                    answer = dtm[1];
                    hint = "";
                    if(!(typeof(dtm[2]) == "undefined")){
                        hint = dtm[2];
                    }
                    document.getElementById('question').innerHTML=question;
                    document.getElementById('hint').innerHTML="***";
                }
            }else{
                forget();
                //alert("错误");
            }
        }
        function forget(){
            var hintStr = answer;
            if(hint!=""){
                hintStr = answer+"["+hint+"]";
            }
            document.getElementById('hint').innerHTML=hintStr;
            if(maxstr!=dqstr){
                txtary.push(dqstr);
                maxstr = dqstr;
                max++;
                //错误数据统计
                i = 1;
                newLs = 0;
                if(errorCoun>0){
                    for(var j=0;j<errorCoun;j++){
                        if(errorAry[j][0]==dqstr){
                            newLs=1;
                            i = errorAry[j][1];
                            i++;
                            errorAry[j][1]=i;
                        }
                    }
                }
                if(newLs==0){
                    var errorLs = [dqstr,i];
                    errorAry.push(errorLs);
                    errorCoun++;
                    //console.log(errorAry);
                }
            }
        }
        function keyup_submit(e){ 
        var evt = window.event || e; 
        if (evt.keyCode == 13){
            //回车事件
            ok();
            }
        }
        function randomTxt(ary) {
            for (var i = 0; i < ary.length; i++) {
                var randomI = parseInt(ary.length * Math.random());
                var temp = ary[i];
                ary[i] = ary[randomI];
                ary[randomI] = temp;
            }
            return ary;
        }
        function errorJG(input){
            if(input=="ex3"){
                document.getElementById('errorConStr').innerHTML="";
            }else{
                var str = "";
                var str2 = "";
                for(var j=0;j<errorCoun;j++){
                    str += errorAry[j][0]+"&nbsp;错"+errorAry[j][1]+"次<br>";
                    str2 += errorAry[j][0]+",";
                }
                if(input=="ex1"){
                    document.getElementById('errorConStr').innerHTML=str;
                }else{
                    document.getElementById('errorConStr').textContent=str2;
                }
            }
        }
    </script>
</html>